<template>
	<swiper class="swiper" ref="mySwiper" :options="swiperOptions">
		<swiper-slide class="swiper-slide" v-for="(item,index) in swiperImg" :key="index">
			<img :src="item" alt="">
		</swiper-slide>
		
		<!-- <div class="swiper-pagination" slot="pagination"></div> -->
	</swiper>
</template>

<script>
export default {
	name: 'carrouselDetail',
	props:["swiperImg"],
	data() {
		return {
			swiperOptions: {
				pagination: {
					el: '.swiper-pagination',
				},
				autoplay:{
					delay:3000,
					stopOnLastSlide:false,
					disableOnInteraction:false
				},
				speed:500,
				loop:true,
				observer:true,
				observeParents:true,
				autoplayDisableOnInteraction:false
				// Some Swiper option/callback...
			}
		};
	},
	//计算属性
	computed: {
		//相当于 new 一个swiper
		swiper() {
			//监控swiper组件中数据是否有变化
			return this.$refs.mySwiper.$swiper;
		}
	},
	mounted() {
		//异步获取数据
		// console.log('Current Swiper instance object', this.swiper);
		// this.swiper.slideTo(0, 2000, false);
	}
};
</script>

<style scoped="scoped">
	*{
		padding: 0;
		margin: 0;
	}
	.swiper,.swiper-slide{
		width:100%;
		overflow: hidden;
		height: 7.5rem;
	}
	.swiper img{
		width: 100%;
		height: 100%;
	}
</style>
